<template>
  <div class="banner">
    <el-carousel
      height="140px"
      :interval="4000"
      :autoplay="true"
      :loop="true"
      arrow="hover"
      indicator-position="outside"
      :touch-move="true"
      trigger="click"
      pause-on-hover
    >
      <el-carousel-item v-for="item in banners" :key="item.id">
        <a :href="item.h5Url" target="_blank">
          <img :src="item.picUrl" :alt="item.typeStr" class="banner-image" />
        </a>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { musicApi } from '@/api/music'

const banners = ref([])

const fetchBanners = async () => {
  try {
    const response = await musicApi.getBanners()
    banners.value = response.data.data || []
  } catch (error) {
    console.error('获取轮播图失败:', error)
  }
}

onMounted(() => {
  fetchBanners()
})
</script>

<style lang="scss" scoped>
.banner {
  width: 100%;
  margin: 10px 0 20px;
  padding: 0 1px;
  position: relative;
}

.banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

:deep(.el-carousel__container) {
  border-radius: 8px;
  overflow: hidden;
}

:deep(.el-carousel__indicators) {
  bottom: 8px;
}

:deep(.el-carousel__indicator) {
  padding: 0 4px;
}

:deep(.el-carousel__button) {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.6);
}

:deep(.el-carousel__indicator.is-active .el-carousel__button) {
  background-color: #fff;
}
</style>